<template>
  <el-dialog
  title="题目预览"
  :visible="dialogVisible"
  width="900px"
  @close="handleClose">
    <el-row>
        <el-col :span="6">
            <p>【题型】：{{TiXing(dialogData.questionType)}}</p>
        </el-col>
        <el-col :span="6">
            <p>【编号】：{{dialogData.id}}</p>
        </el-col>
        <el-col :span="6">
            <p>【难度】：{{NanDu(dialogData.difficulty)}}</p>
        </el-col>
        <el-col :span="6">
            <p>【标签】：{{dialogData.tags}}</p>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="6">
            <p>【学科】：{{dialogData.subjectName}}</p>
        </el-col>
        <el-col :span="6">
            <p>【目录】：{{dialogData.directoryName}}</p>
        </el-col>
        <el-col :span="6">
            <p>【方向】：{{dialogData.direction}}</p>
        </el-col>
    </el-row>
    <hr>
    <el-row>
        <p>【题干】：</p>
        <p style="color: blue;" v-html="dialogData.question"></p>
        <p><span>{{TiXing(dialogData.questionType)}}</span> 选项：（以下选中的选项为正确答案）</p>
        <div v-if="dialogData.questionType==='1'">
            <p v-for="itm in dialogData.options" :key="itm.id"><el-radio onclick="return false;" v-model="itm.isRight" :label="1">{{itm.title}}</el-radio></p>
        </div>
        <div v-else>
            <p v-for="itm in dialogData.options" :key="itm.id"><el-checkbox :value="itm.isRight===1">{{itm.title}}</el-checkbox></p>
        </div>
    </el-row>
    <hr>
    <el-row>
        <label>【参考答案】：</label><el-button :disabled="!dialogData.videoURL" type="danger" size="small" @click="show=!show">视频答案预览</el-button>
        <div style="margin-top:15px;" v-if="show">
            <video :src="dialogData.videoURL" controls style="width: 400px;height: 300px;"></video>
        </div>
    </el-row>
    <hr>
    <el-row>
        <p>【答案解析】：<span v-html="dialogData.answer"></span></p>
    </el-row>
    <hr>
    <el-row>
        <p>【题目备注】：</p>
        <p style="color: red;">{{dialogData.remarks}}</p>
        <div style="text-align: right;">
            <el-button type="primary" @click="handleClose">关闭</el-button>
        </div>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object
    }
  },
  methods: {
    handleClose () {
      this.$emit('handle-close')
    },
    TiXing (type) {
      const obj = {
        1: '单选题',
        2: '多选题',
        3: '简答题'
      }
      return obj[type]
    },
    NanDu (type) {
      const obj = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return obj[type]
    }
  }
}
</script>

<style>

</style>
